<template>
  <div class="nav_menu">
    <ul class="nav">
      <li v-for="(nav, index) in navList" :key="index" class="item" :class="{active_nav: activeNav === index}"
        @click="$router.push(nav.name)">
        <div class="icon">
          <i :class="nav.icon"></i>
        </div>
        <div class="name">{{nav.navItem}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "NavMenu",
    data() {
      return {
        navList: [
          { name: "/", navItem: "首页", icon: "el-icon-s-home" },
          { name: "/task", navItem: "任务", icon: "el-icon-document" },
          { name: "/project", navItem: "项目", icon: "el-icon-folder-opened" },
          { name: "/statistics", navItem: "看板", icon: "el-icon-menu" },
          // { name: "/msg_work", navItem: "消息&待办", icon: "el-icon-s-home" },
          { name: "/system", navItem: "系统设置", icon: "el-icon-setting" }
        ]
      };
    },
    methods: {},
    computed: {
      activeNav() {
        let path = "/" + this.$route.path.split("/")[1];
        return this.navList.findIndex(nav => nav.name == path);
      }
    }
  };
</script>
<style lang="less" scope>
  @import "./index.less";
</style>